<template>
    <div>
        <van-nav-bar style="background-color: #2894ff">
            <template #left>
                <div @click="onClickLeft" style="color: white">
                    <van-icon name="arrow-left" size="18" color="#fff"></van-icon>
                    <span style="font-size: 18px; line-height: 20px">问医生</span>
                </div>
            </template>
        </van-nav-bar>
        <div>
        </div>
        <van-search shape="round" @search="lookfor" v-model="value" placeholder="疾病/症状/科室/医院/医生" />
    </div>
    <div style="display: flex;border-bottom: 1px solid gray;">
        <img src="../../assets/mypic/dian.jpg" height="60px">
        <van-overlay v-for="item in Details" :key="item.doctor_id" :show="show" @click="show = false" style="overflow: scroll;">
            <div style="background-color: #e0ecfe;padding: 0 15px 5px">
                <div style="margin-top: 80px;display: flex;">
                    <img :src="item.doctor_avatar" style="border-radius: 50%;height:60px;">
                    <div style="margin: 15px 0;margin-left: 8px;">
                        <div>
                            <span style="font-size: 22px;font-weight: bolder;">{{item.doctor_name}}</span><span> {{item.doctor_titles}} | {{item.department_name}} </span>
                        </div>
                        <div>
                            <span>{{item.hospital_name}}</span>
                            <div style="background-color: #c27c1a;display: inline-block;color: white;padding: 1px;font-size: 13px;color: #50535a;">
                                <i class="iconfont icon-yiyuan1" style="color: aliceblue;"></i>
                                <span style="display:inline-block;font-weight: bolder;color: aliceblue;">三甲</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div style="padding: 10px 15px;background-color: aliceblue;border-radius: 8px;font-size: 13px;color: #50535a;">
                        <div><span style="background-color: #2695fe;display: inline-block;color: white;">
                            <span style="display:inline-block;padding: 0 3px;">擅长</span>
                        </span><span style="line-height: 2;">{{ item.doctor_great }}</span></div>
                       <p ><div style="background-color: #2695fe;display: inline-block;color: white;">
                                <span style="display:inline-block;padding: 0 3px;">简介</span>
                            </div><span style="line-height: 2;">擅长痤疮,带状疱疹,神经性皮炎,湿疹,特异性皮炎,银屑病等常见皮肤病的处理。</span></p> 
                    </div>
                </div>
                <div style="margin-top: 10px;">
                    <div style="padding: 10px 15px;background-color: aliceblue;box-sizing: content-box;border-radius: 8px;font-size: 12px;">
                        <div v-for="item in rates" :key="item.rate_content">
                            <p style="font-weight:bolder;padding: 12px 0;font-size: 16px;">患者评价（38）</p>
                            <div style="display: flex;justify-content: space-between;margin: 3px 0;">
                                <p>用户****&nbsp;&nbsp;&nbsp;<van-icon name="star" color="#fcb00f" /><van-icon name="star" color="#fcb00f" /><van-icon name="star" color="#fcb00f" /><van-icon name="star" color="#fcb00f" /><van-icon name="star" color="#fcb00f" /></p>
                                <span>2022-11-18</span>
                            </div>
                           <p style="line-height: 1.5;">{{ item.rate_content }}</p> 
                           <hr style="margin-top: 12px;">
                        </div>
                    </div>
                </div>
                <div style="margin:20px 0;">
                    <van-button type="primary" size="large" @click="router.push(`/home/consulting/${item.doctor_id}`)">图文咨询</van-button>
                </div>
            </div>
        </van-overlay>
    </div>
    <div @click="look(item.doctor_id)" v-for="item in list" :key="item.doctor_id" style="display: flex;border-bottom: 1px solid gray;padding: 15px 0;">
        <div @click="show = true">
            <div style="display: flex;">
                <img :src="item.doctor_avatar" style="border-radius: 50%;width: 50px;height: 50px;">
                <div style="line-height: 1.5;font-size: 13px;">
                    <span style="font-weight: bold;font-size: 18px;">{{item.doctor_name}}</span>
                    <span style="margin-left: 5px;">{{item.doctor_titles}}&nbsp;|&nbsp;</span>
                    <span>{{item.department_name}}</span>
                    <div style="display: flex;">
                        <span style="font-size: 16px;">{{item.hospital_name}}</span>
                        <div style="background-color: darkorange;padding: 0 3px;margin-left: 5px;">
                            <i class="iconfont icon-yiyuan1" style="color: aliceblue;"></i>
                            <span style="display:inline-block;color: aliceblue;">三甲</span>
                        </div>
                    </div>
                    <p v-html="brightenKeyword(item.doctor_great,value)"></p>
                    <p>患者评分<span style="color: #0794f8;">4.8</span>&nbsp;&nbsp;质询量<span style="color: #0794f8;">1046</span>&nbsp;&nbsp;响应时间 <span style="color: #0794f8;">38分钟</span></p>
                    <p style="display: inline-block;padding: 1px 2px;background-color: burlywood;border-radius: 2px;color: #8f4f0d;">口碑医生</p>
                    <br>
                    <div style="margin: 15px 0;padding: 10px;display: inline-block;background-color: #f8f7ea;border-radius: 5px;font-weight: bolder;color: #828283;">
                        图文质询<span style="color:#1087db">￥30</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import httpApi from '@/http';
import { ref, onMounted, reactive } from 'vue';
import { useRouter,useRoute } from 'vue-router';
let value = reactive<any>("")
const list = reactive<any>([])
const router = useRouter()
const route = useRoute()
const show = ref(false);
const Details = reactive<any[]>([])
const rates = reactive<any[]>([])
const onClickLeft = () => history.back();
const look =function(e:any){
    httpApi.DoctorApi.selectById({doctor_id:e}).then(res=>{
        console.log('加载的内容',res);
        Details.push(...res.data.data)
        console.log(Details);
    })
    httpApi.DoctorApi.selectRate({doctor_id:e}).then(res=>{
        rates.push(...res.data.data)
        console.log(rates);
    })
}
const lookfor = () => {
    let doctor_great=value
    console.log(doctor_great);
    httpApi.DoctorApi.selectDoctorBydoctorLike({doctor_great}).then(res=>{
        console.log('结果:',res);
        list.splice(0, list.length, ...res.data.data)
    })
}

const brightenKeyword = (val: any, value: string) => {
 // 方法一
 val = val + '';
 // console.log('药品药品', val);
 if (val.indexOf(value) !== -1 && value !== '') {
  return val.replace(value, '<span style="color: red;">' + value + '</span>')
 } else {
  return val
 }
}
</script>


<style lang="scss" scoped>
p{
    margin: 0px;
}
i{
    &:before{
        font-size: 16px;
    }
}
</style>